<template>
  <div class="player">
    <video-player @timeupdate="change($event)"  class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions"></video-player>
  </div>
</template>
<script>
  require('video.js/dist/video-js.css')
  require('vue-video-player/src/custom-theme.css')
  import { videoPlayer } from 'vue-video-player'
  import { baseUrl } from '@/utils/env'
  export default {
    name: 'player',
    props: {
      playerOptions: {
          playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
          autoplay: true, //如果true,浏览器准备好时开始回放。
          muted: false, // 默认情况下将会消除任何音频。
          loop: false, // 导致视频一结束就重新开始。
          preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
          language: 'zh-CN',
          aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
          fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
          sources: [{
            type: "",
            src: "" //url地址
          }],
          poster: "", //你的封面地址
          height:300,
          // width: document.documentElement.clientWidth,       
          controlBar: {
            timeDivider: true,
            durationDisplay: true,
            remainingTimeDisplay: false,
            fullscreenToggle: true //全屏按钮
          },
         
      },
     
      playerPause:{
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
           // src:'',
      }
    },
    components: {
      videoPlayer
    },
    //记得一定要初始化这块
    computed: {
      player(){
      return this.$refs.videoPlayer.player;
      }
    },
    mounted(){
    },
   
    methods: {
      change($event){

        //console.dir(this.$refs.videoPlayer.player.cache_)
        this.$emit('changeEvent',this.$refs.videoPlayer.player.cache_)
      }
    }
  }
</script>

<style>
  /* .player .video-player{
    height: 300px;
  }
  .player.vjs-custom-skin > .video-js{
    height: 300px;
  } */
  .vjs-has-started .vjs-control-bar{
    transition: none !important;
  }
  .vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar{
    opacity: 1 !important;
  }
</style>